<template>
	<view>
		<view class="cn">
			<view style="display: flex;align-items: center;">
				<uni-icons type="contact" size="55"></uni-icons>
				<view id="ms">
					<view>产品名称：{{product.name}}</view>
					<view>产品介绍：{{product.introduce}}</view>
					<view>使用场景：{{product.scene}}</view>
				</view>
			</view>
			<view id="btn">
				<uni-tag @click="goTem()" text="示例报告" type="success" />
			</view>
		</view>

		<div class="tgsj">
			<div id="jg">
				<div>自用价格：</div>
				<h2>{{ zeroTwo(product.basePricing) }}</h2>
			</div>
			<button type="primary" size="mini"
				@click="$tab.navigateTo('/pages/home/self?id=' + productId)">立即使用</button>
		</div>

		<view class="tgsj">
			<view>
				<h2 style="line-height: 36.33px;">{{ zeroTwo(product.basePricing + Number(product.promotionAdd)) }}</h2>
				<text>推广售价</text>
			</view>
			<view>
				<uni-easyinput v-model="product.promotionAdd" style="padding: 0;height: 36.33px;" trim="all"
					type="number" :clearable="false">
					<template #right>
						<uni-tag @click="setPromotionAdd()" style="margin-right: 6px" text="修改" />
					</template>
				</uni-easyinput>
				<text>推广收益</text>
			</view>
			<view>
				<button style="margin-top: 10px;" @click="$tab.navigateTo('/pages/home/invite?index=P' + productId)"
					type="primary" size="mini">立即推广</button>
			</view>
		</view>
		<view class="tgsj" v-if='$auth.hasRoleOr(["region", "captain"])'>
			<view style="padding: 10px 0;">
				<h2 style="line-height: 45px;">{{zeroTwo(product.basePricing + Number(product.basePriceAdd))}}</h2>
				<text>下级价格</text>
			</view>
			<view style="padding: 10px 0;">
				<uni-easyinput v-model="product.basePriceAdd" v-if='$auth.hasRole("captain")'
					style="padding: 0;height: 45px;" trim="all" type="number" :clearable="false">
					<template #right>
						<uni-tag @click="setBasePriceAdd()" style="margin-right: 6px" text="修改" />
					</template>
				</uni-easyinput>
				<h2 v-else style="line-height: 45px;">{{zeroTwo(product.basePriceAdd)}}</h2>
				<text>下级提成</text>
			</view>
			<view style="padding: 10px 0;">
				<button @click="$tab.navigateTo('/pages/home/invite?index=member')" size="mini">邀请队员</button>
				<button @click="$tab.navigateTo('/pages/home/invite?index=captain')" size="mini" v-if='$auth.hasRole("region")'>邀请队长</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		baseInfo,
		setPrice
	} from '@/api/product.js'

	export default {
		name: 'Tuiguang',
		props: {
			productId: {
				required: true,
				type: String
			}
		},
		data() {
			return {
				product: {
					name: undefined,
					introduce: undefined,
					scene: undefined,

					basePricing: undefined,
					promotionAdd: undefined,
					basePriceAdd: undefined
				}
			}
		},
		mounted() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				baseInfo(this.productId).then(res => {
					this.product = res.data
				})
			},
			setPromotionAdd() {
				if (this.product.promotionAdd < 0) {
					this.$modal.msg("金额需大于0")
				} else {
					setPrice({
						productId: this.productId,
						type: 'TGSY',
						amount: this.product.promotionAdd
					}).then(res => {
						if (res.code == 200) {
							this.getInfo()
							this.$modal.msgSuccess("修改成功")
						} else {
							this.$modal.msgError(res.msg)
						}
					})
				}
			},

			setBasePriceAdd() {
				if (this.product.basePriceAdd < 0) {
					this.$modal.msg("金额需大于0")
				} else {
					setPrice({
						productId: this.productId,
						type: 'XJTC',
						amount: this.product.basePriceAdd
					}).then(res => {
						if (res.code == 200) {
							this.getInfo()
							this.$modal.msgSuccess("修改成功")
						} else {
							this.$modal.msgError(res.msg)
						}
					})
				}
			},

			goTem() {
				this.$tab.navigateTo('/pages/' + ['', 'bdp', 'bd', 'com', 'mar', 'jud', 'imm'][this.productId])
			}
		}
	}
</script>

<style lang="scss">
	.cn {
		width: 98vw;
		padding: 16rpx;
		margin: 8rpx auto;
		background-color: aliceblue;
		border-radius: 12rpx;

		#ms {
			line-height: 24px;
			width: 85vw;

			view {
				font-size: 27rpx;
				margin-bottom: 6px;
			}
		}

		#btn {
			text-align: right;
			padding: 16rpx;
		}
	}

	.tgsj {
		width: 98vw;
		margin: 8rpx auto 0;
		padding: 26rpx 0;

		display: flex;
		justify-content: center;
		text-align: center;
		background-color: aliceblue;
		border-radius: 12rpx;

		#jg {
			width: 49vw;
			line-height: 30px;
			display: flex;
			justify-content: flex-end;
		}

		view {
			width: 30vw;
			height: 150rpx;
			padding: 38rpx 0;
		}
	}
</style>